<template>
	<view class="">
		<view class="state">
			<view v-if="content.state == 0">
				<view><text>退货中</text></view>
				<text class="time">2019年12月27日 09:23</text>
			</view>
			<view v-if="content.state == 1">
				<view><text>退款成功</text></view>
				<text class="time">2019年12月27日 09:23</text>
			</view>
			<view v-if="content.state == 2">
				<view><text>退款失败</text></view>
				<text class="time">2019年12月27日 09:23</text>
			</view>
			<!-- <text v-else-if="content.state == 3">待成团</text>
			<text v-else-if="content.state == 4">拼团失败</text>
			<text v-else-if="content.state == 5">已完成</text> -->
		</view>
		<view class="info_detail">


			<!-- 退款总金额 -->
			<view class="money" v-if="content.state == 0 || content.state == 1">
				<view class="money_left">退款总金额</view>
				<view class="money_right">
					￥
					<text>{{content.price}}</text></view>
			</view>
			<view class="explain" v-else-if="content.state == 2 ">
				商家已拒绝您的退款申请，如问题仍为解决，您可以重新发起申请
			</view>
			<!-- 退货物流 -->
			<view class="refund_logisyics" v-if="content.state == 0" @tap="tologistics()">
				<image :src="Url+'mine/index/logistics.png'"></image>
				<view class="logistics_info">
					<view class="logistics_info_1"> 退货物流:韵达快递（4503355623452）</view>
					<view class="logistics_info_1"> 【合肥市】 已离开 安徽合肥分拨中心；发往广东分拨中心</view>
					<view class="time logistics_info_1"> 2019-01-06 12:11:03</view>
				</view>
				<i class="icon">&#xe637;</i>
			</view>

			<view v-else-if="content.state == 1" class="moneyback">
				<view class="moneyback_left">退回微信</view>
				<view class="moneyback_right">
					￥
					<text>{{content.price}}</text></view>
			</view>

			<!-- 退款信息 -->
			<view class="refund_info">
				<view class="refund_title">退款信息</view>
				<view class="refund_goods">
					<view class="productinfo_pic">
						<image :src="content.src" mode="widthFix"></image>
					</view>
					<view class="productinfo_info">
						<view class="title">{{ content.title }}</view>
						<view class="standard">{{ content.standard }};{{ content.weight }}</view>
					</view>

				</view>
				<view class="refund_info_1">退款原因：其他</view>
				<view class="refund_info_1">退款金额：￥{{content.price}}</view>
				<view class="refund_info_1">申请时间：2019-12-15 11:01:03</view>
				<view class="refund_info_1">退款编号：HG4546454545454</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Url:this.Imgurl,
				content: {}
			};
		},
		onLoad(options) {
			console.log(options.content.title)
			console.log("售后详情")
			this.content = JSON.parse(options.content);
			console.log(this.content);
		},
		methods: {
			tologistics() {
				uni.navigateTo({
					url: '/pageD/logistics/logistics'
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.state {
		width: 100%;
		height: 130upx;
		background-color: #f73e2f;
		padding: 0 40upx;
		padding-top: 15upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;

		text {
			font-size: 32upx;
			color: #ffffff;
		}

		.time {
			font-size: 22upx;
			color: #ffffff;
		}
	}

	.info_detail {
		background: #fff;
		font-size: 26upx;
	}

	.explain {
		margin: 0 25upx;
		padding: 30upx 0;
		border-bottom: 2upx solid #f9f9f9;
	}

	.money {
		display: flex;
		margin: 0 25upx;
		justify-content: space-between;

		padding: 30upx 0;
		border-bottom: 2upx solid #f9f9f9;

		.money_right {
			color: red;
		}
	}

	.moneyback {
		display: flex;
		margin: 0 25upx;
		justify-content: space-between;

		padding: 30upx 0;


	}

	.refund_logisyics {
		color: #4CD964;
		font-size: 26upx;
		padding: 25upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 30upx;
			height: 30upx;
			margin-right: 25upx;
		}

		.logistics_info {
			.logistics_info_1 {
				margin: 10upx;
			}

			.time {
				color: #d8d8d8;
				font-size: 22upx;
			}
		}

		.icon {
			color: #a7a7a7;
			line-height: 20upx;
			font-size: 24upx;
		}
	}

	.refund_title {
		padding: 25upx;
		border-top: 12upx solid #f9f9f9;
	}

	.refund_goods {
		background: #f9f9f9;
		padding: 25upx 30upx;
		display: flex;
		align-items: center;

		.productinfo_pic {
			width: 120upx;
			height: 120upx;
			border: 2upx solid #e1e1e1;
			border-radius: 20upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 104upx;
				height: 104upx;
			}
		}

		.productinfo_info {
			margin-left: 30upx;

			.title {
				font-size: 24upx;
				color: #333333;
				line-height: 40upx;
			}

			.standard {
				font-size: 24upx;
				color: #999;
				margin-top: 10upx;
			}
		}
	}

	.refund_info_1 {
		padding: 15upx 25upx;
		color: #d8d8d8;
		font-size: 24upx;

	}
</style>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
